<template>
  <el-dialog
    v-model="showDialog"
    title="绘制热力图设置"
    width="350"
    draggable
    :modal="false"
    overflow
    :close-on-click-modal="false"
    :append-to-body="true"
    :id="props.dioid"
    :style="{
      top: '15%',
      left: '6%',
      margin: '0',
      maxHeight: '700px',
      overflow: 'auto',
    }"
    :align-center="false"
    @close="onCancel"
  >
    <el-form :model="props.polylinefrom" label-width="80px">
      <el-form-item label="图层名">
        <el-input v-model="props.polylinefrom.LayerName" />
      </el-form-item>
      <template v-for="(item, index) in props.polylinefrom.Point" :key="index">
        <label>点位{{ index + 1 }}</label>
        <el-form-item label="经度">
          <el-input @change="changefrom" type="number" v-model="item.Lon" />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input @change="changefrom" type="number" v-model="item.Lat" />
        </el-form-item>
        <el-form-item label="高度">
          <el-input @change="changefrom" type="number" v-model="item.Alt" />
        </el-form-item>
      </template>

      <el-form-item label="线颜色">
        <el-color-picker
          @active-change="changecolor"
          @blur="changefrom"
          v-model="props.polylinefrom.LineStyle.ColorData"
          show-alpha
        />
      </el-form-item>
      <el-form-item label="线宽">
        <el-input-number
          @change="changefrom"
          :min="1"
          v-model="props.polylinefrom.LineStyle.LineWidth"
        />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          :autosize="{ minRows: 2 }"
          type="textarea"
          v-model="props.polylinefrom.DesValue"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { ColorStyle } from "@/utils/compnt.js";
import { postAddDrawLine2 } from "@/api";
const props = defineProps({
  showDrawDialog: {
    type: Boolean,
    default: false,
  },
  dioid: {
    type: String,
    default: "",
  },
  polylinefrom: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["polylinefromcol"]);

const submitForm = async () => {
  props.polylinefrom.Point.forEach((element) => {
    console.log(element);
    element.Lon = Number(element.Lon);
    element.Lat = Number(element.Lat);
    element.Alt = Number(element.Alt);
  });

  try {
    const response = await postAddDrawLine2(props.polylinefrom);
    console.log("请求成功:", response);
    onCancel();
    // 可以在这里处理响应数据
  } catch (error) {
    console.error("请求失败:", error);
    // 可以在这里处理错误信息
  }
};
const onCancel = () => {
  const event = new CustomEvent("draw-polyline-cancel");
  window.dispatchEvent(event);
};
//===========================

const showDialog = ref(props.showDrawDialog);
// 监听 props 变化以同步本地状态
watch(
  () => props.showDrawDialog,
  (newValue) => {
    showDialog.value = newValue;
  }
);

const changecolor = (color) => {
  props.polylinefrom.LineStyle.ColorData = color;

  props.polylinefrom.LineStyle.LineColor = ColorStyle(color, 1);
};
const changefrom = () => {
  emits("polylinefromcol", props.polylinefrom);
};
</script>